<template>
  <div class='container'>
    <el-card>
       <!-- 顶部栏--搜索以及新增学科按钮 -->
     <el-row  :gutter="10">
       <el-col :span="18">
         <el-row>
           <el-form :inline="true" ref="articlesForm" :model="articlesForm" label-width="80px">
             <el-col :span="8">
               <el-form-item label="关键字:" >
                <el-input v-model="keyword" placeholder="根据文章标题搜索"/>
              </el-form-item>
             </el-col>
            <el-col :span="8">
              <el-form-item label="状态:" >
              <el-select v-model="state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" @click="deleteIptVal">清除</el-button>
              <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
          </el-col>
          </el-form>
         </el-row>
       </el-col>

       <el-col :span="6" style="text-align: right">
        <el-button size="small" type="success" icon="el-icon-edit" @click="addArticles">新增技巧</el-button>
       </el-col>
     </el-row>
      <!-- 消息提示 -->
    <el-alert
      type="info"
      :closable="false"
      show-icon>
      <template>
        数据一共{{total}}条
      </template>
    </el-alert>
    <!-- 表格 -->
      <el-table
        v-loading="loading"
        element-loading-text="给我一点时间"
        :data="articlesData"
        :header-cell-style="{background:'#FAFAFA'}"
        fit
        highlight-current-row
        style="width: 100%;margin:15px 0">
        <el-table-column  label="序号" type="index" width="80px" />
        <el-table-column  label="标题"  prop="title"  width="310px">
          <template slot-scope="{row}">
            {{row.title}}<i class="el-icon-film" v-if="row.videoURL" @click="onVideo(row)"/>
          </template>
        </el-table-column>
        <el-table-column  label="阅览数" prop="visits" />
        <el-table-column  label="录入人" prop="username"/>
        <el-table-column  label="录入时间">
          <template slot-scope="{row}">
            {{row.createTime|format}}
          </template>
        </el-table-column>
        <el-table-column  label="状态" prop="state" width="100px" >
          <template slot-scope="{row}">
         {{row.state===1?'已启用':"已禁用"}}
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="{row}">
              <el-button type="text" @click="onPreview(row)">预览</el-button>
              <el-button type="text" @click="changeState(row)">{{row.state===1?'禁用':"启用"}}</el-button>
              <el-button type="text" :disabled="row.state ===1?true:false" @click="addArticles(row)">修改</el-button>
              <el-button type="text" :disabled="row.state ===1?true:false" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="end" v-if="isShowPag">
        <el-col :span="8">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="10"
              layout=" prev, pager, next,sizes, jumper"
              background
              :total="total">
            </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 播放视频弹出层 -->
   <div class="videoDialog">
      <el-dialog  :visible.sync="videoDialog" @close="videoURL=''">
      <video :src="videoURL" controls autoplay width="100%"></video>
    </el-dialog>
   </div>
    <!-- 预览弹出层 -->
    <articles-preview ref="preview" :data="data" />
    <!-- 新增文章弹出层 -->
    <articles-add ref="add"
     @on-save="onSaveData"
     @on-close="onClose"
    :addArticlesForm="addArticlesForm" />
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import articlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: { articlesPreview, ArticlesAdd },
  name: 'articles',
  data () {
    return {
      articlesForm: { // 获取初始列表
        page: 1,
        pagesize: 10
      },
      keyword: '', // 关键字
      state: '', // 状态
      isShowPag: true, // 分页的显示和隐藏
      total: 0,
      loading: false,
      articlesData: [], // 表格数据,
      videoDialog: false, // 播放视频弹出层
      videoURL: '',
      data: {}, // 点击预览的数据
      addArticlesForm: { // 添加和修改的数据
        title: '',
        articleBody: '',
        videoURL: ''
      }
    }
  },
  computed: {
  },
  created () {
    this.loadArticlesList()
  },
  methods: {
    // 获取文章列表
    async loadArticlesList () {
      const res = await list(this.articlesForm)
      console.log(res)
      this.total = res.data.counts
      this.articlesData = res.data.items
      this.loading = false
    },
    // 改变每页多少条
    handleSizeChange (val) {
      this.articlesForm.pagesize = val
      this.loadArticlesList()
    },
    // 改变当前页
    handleCurrentChange (val) {
      this.articlesForm.page = val
      this.loadArticlesList()
    },
    // 点击清除按钮
    deleteIptVal () {
      this.articlesForm = {
        page: 1,
        pagesize: 10
      }
      this.keyword = ''
      this.state = ''
      this.isShowPag = true
      this.loadArticlesList()
    },
    // 点击搜索
    async onSearch () {
      this.isShowPag = false
      this.loading = true
      if (this.state === '' && this.keyword === '') {
        this.loadArticlesList()
      } else if (this.state === '') {
        this.articlesForm.keyword = this.keyword
        const res = await list(this.articlesForm)
        this.articlesData = res.data.items
        this.total = res.data.counts
      } else {
        this.articlesForm.state = this.state
        this.articlesForm.keyword = this.keyword
        const res = await list(this.articlesForm)
        this.articlesData = res.data.items
        this.total = res.data.counts
      }
      this.loading = false
      this.articlesForm.page = 1
      this.loadArticlesList()
    },
    // 播放视频
    onVideo (row) {
      this.videoDialog = true
      this.videoURL = row.videoURL
    },
    // 预览
    onPreview (row) {
      this.$refs.preview.previewDialogVisible = true
      this.data = row
    },
    // 点击禁用/启用
    async changeState (row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      await changeState({
        id: row.id,
        state: row.state
      })
      this.$message.success('操作成功')
      this.loadArticlesList()
    },
    // 点击新增学科
    addArticles (row) {
      this.$refs.add.addDialogVisible = true
      if (row.id) {
        this.addArticlesForm = { ...row }
      }
    },
    // 点击添加弹出层确定按钮。重新渲染数据
    onSaveData () {
      this.loadArticlesList()
    },
    // 关闭弹出。清空数据
    onClose () {
      this.addArticlesForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 点击删除按钮
    remove (row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.articlesData.length === 1 && this.articlesForm.page !== 1) {
          this.articlesForm.page--
        }
        await remove({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.loadArticlesList()
      })
    }
  }
}

</script>

<style scoped lang='less'>
.container{
  padding: 10px;
}
.el-icon-film{
  color: #0000ff;
  margin-left: 5px;
  cursor: pointer;
}
.videoDialog{
 ::v-deep .el-dialog{
  background: transparent;
  border: 0;
  box-shadow:0 0px 0px #ccc;
  .el-dialog__header{
  background: transparent;
  }
  .el-dialog__headerbtn{
   width: 50px;
   height: 50px;
   left: 50%;
   top: 5px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.4);
  }
 }

}

</style>
